<template>
    <div class="main-box">
        <!-- 搜索 -->
        <div class="search-box">
            <el-form :inline="true" :model="query" ref="query" class="demo-form-inline" size="small">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="query.name" placeholder="请输入搜索内容"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="mini" @click="clickSearch">
                        <i class="el-icon-search"></i>
                    </el-button>
                    <el-button size="mini" @click="resetForm('query')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 按钮 -->
        <div class="btn-box">
            <el-button type="primary" size="mini" icon="el-icon-plus" @click="add">添加</el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="del">删除</el-button>
        </div>
        <!-- 表格 -->
        <div class="table-list-box">
            <el-table ref="multipleTable" :data="listData" style="width: 100%;" border height="100%"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="40">
                </el-table-column>
                <el-table-column prop="name" label="名称">
                </el-table-column>
                <el-table-column prop="sort" label="排序">
                </el-table-column>
                <el-table-column prop="create_time" label="创建时间">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="120">
                    <template slot-scope="scope">
                        <el-button type="text" size="mini" @click="edit(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="page-box">
            <el-pagination @current-change="handleCurrentChange" :page-size="query.limit"
                layout="total, prev, pager, next, jumper" :total="listTotal" :current-page="query.page">
            </el-pagination>
        </div>

        <!-- 添加 -->
        <x-add ref="add" @updateList="updateList" />
        <!-- 编辑 -->
        <x-edit ref="edit" @updateList="updateList" />
    </div>
</template>
  
<script>
import { list, del } from '@/api/info/articleCategory';
export default {
    name: "list",
    components: {
        'x-add': () => import('./add'),
        'x-edit': () => import('./edit'),
    },
    data() {
        return {
            listData: [],
            listTotal: 0,
            query: {
                page: 1,
                limit: 10,
                name: ''
            },
            selectIds: ''
        }
    },
    mounted() {
        this.getList();
    },
    methods: {
        getList() {
            list(this.query).then(res => {
                this.listTotal = res.data.count;
                this.listData = res.data.data
            })
        },
        clickSearch() {
            this.query.page = 1;
            this.getList();
        },
        add() {
            this.$refs.add.dialogFormVisible = true;
        },
        del() {
            this.$confirm("<span style='color:red;'>删除无法找回, 是否继续?</span>", '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                dangerouslyUseHTMLString: true,
                type: 'warning'
            }).then(() => {
                del({ 'ids': this.selectIds }).then(res => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });

                    if (this.selectIds != '') {
                        var maxCount = this.listTotal - this.selectIds.split(',').length;
                        var maxPage = Math.ceil(maxCount / this.query.limit);
                        if (maxPage < this.query.page) {
                            this.query.page--;
                        }
                    }
                    this.getList();
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        edit(row) {
            this.$refs.edit.dialogFormVisible = true;
            this.$refs.edit.initData(row);
        },
        handleSelectionChange(val) {
            this.selectIds = val.map(item => item.id).toString();
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.query.page = 1;
            this.getList();
        },
        handleCurrentChange(page) {
            this.query.page = page;
            this.getList();
        },
        updateList() {
            this.getList();
        },
        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
    }
}
</script>
  
<style lang="less" scoped>
.main-box {
    background-color: white;
    height: 100%;
    padding: 15px 30px;
    box-sizing: border-box;

    .table-list-box {
        margin-top: 15px;
        height: calc(100% - 140px);
        overflow: auto;

        .head-img {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            text-align: center;
        }
    }

    .page-box {
        margin-top: 15px;
        display: flex;
        justify-content: flex-end;
    }
}
</style>